<template>
  <div>
    <nav-bar :title="title"></nav-bar>
    <div class="maxinBox">
      <van-field
        disabled
        required
        v-model="name"
        name="加班人"
        label="加班人"
        placeholder="请输入加班人"
      />
      <van-field
        disabled
        required
        v-model="address"
        name="签到地址"
        label="签到地址"
        placeholder="请输入签到地址"
      />
      <van-field
        required
        v-model="form.overTimeContent"
        name="加班内容"
        label="加班内容"
        placeholder="请输入加班内容"
      />
      <van-field required name="uploader" label="附件上传">
        <template #input>
          <van-uploader multiple :max-count="1" v-model="imagesList" :after-read="onUploader" :before-delete="delUpload" />
        </template>
      </van-field>
      <div class="backgroundfff" style="position: fixed;bottom: 0;width: 100%;">
        <div style="padding: 0.3125rem 10%;">
          <van-button round block type="info" @click="addReported">
            签到
          </van-button>
        </div>
      </div>





    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import dashbordAPI from '../../../../api/dashbordAPI.js'
  import signManage from '../../../../api/workAPI/signManage.js'
  export default {
    data() {
      return {
        title: '加班开始签到',
        imagesList: [],
        name: JSON.parse(localStorage.getItem('name')).name,
        address: JSON.parse(localStorage.getItem('pointDetails')).checkPointLocation,
        attachmentUrl: [],
        form: {
          checkPointId: JSON.parse(localStorage.getItem('pointDetails')).checkPointId,
          overTimeContent: '',
          attachmentUrl: '',
          checkType: localStorage.getItem('signStatus'),
        }
      }
    },
    methods: {
      // 上传图片
      onUploader(file) {
        file.status = 'uploading'
        file.message = '上传中'
        dashbordAPI.uploadAvatar(file.file).then(res => {
          this.attachmentUrl.push(res.fileUrl)
          file.status = ''
          file.message = ''
        }).finally(() => {
          file.status = ''
          file.message = ''
        })
      },
      // 删除上传图片
      delUpload(file) {
        this.imagesList.forEach(item => {
          if (item.file.name === file.file.name) {
            let index = this.imagesList.indexOf(item);
            this.imagesList.splice(index, 1)
            this.attachmentUrl.splice(index, 1)
          }
        })
      },
      // 提交
      addReported() {
        let projectId = localStorage.getItem('projectId')
        if (this.form.overTimeContent === '') {
          this.$toast.fail('加班内容不能为空')
          return
        }
        if (!this.attachmentUrl.length) {
          this.$toast.fail('请上传附件照片')
          return
        }
        this.form.attachmentUrl = this.attachmentUrl[0]
        signManage.addSign(projectId, this.form).then(res => {
          this.$toast('添加成功')
          this.$router.push({
            name: 'SignManage'
          })
        })
      }
    },
    mounted() {
      if (localStorage.getItem('signStatus') === '2') {
        this.title = '加班开始签到'
      } else if (localStorage.getItem('signStatus') === '3') {
        this.title = '加班结束签到'
      }
    }
  }
</script>

<style scoped lang="scss">
/deep/ .van-field--disabled .van-field__label{
  color: #646566;
}
</style>
